<template>
    <div ref="dom"></div>
</template>

<script>
import echarts from 'echarts'
import { on, off } from '@/libs/tools'
export default {
  name: 'serviceRequests',
  props: {
    lists: Array
  },
  data () {
    return {
      dom: null
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    }
  },
  mounted () {
    const option = {
      title: {
        text: '新增客户数量',
        subtext: '',
        x: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'category',
        data: this.xAxisData
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: this.seriesData,
        type: 'line'
      }]
    }
    this.$nextTick(() => {
      this.dom = echarts.init(this.$refs.dom)
      this.dom.setOption(option)
      on(window, 'resize', this.resize)
    })
  },
  computed: {
    seriesData () {
      const lists = this.lists
      const data = []
      for (let index = lists.length - 1; index >= 0; index--) {
        data.push(lists[index].people_number)
      }
      return data
    },
    xAxisData () {
      const lists = this.lists
      const data = []
      for (let index = lists.length - 1; index >= 0; index--) {
        data.push(lists[index].date)
      }
      return data
    }
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
